<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字小游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        success: '#10B981',
                        warning: '#F59E0B',
                        info: '#3B82F6'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-lg p-6 max-w-md w-full">
        <h1 class="text-2xl font-bold text-center text-primary mb-6">猜数字游戏</h1>
 
        <div class="text-center mb-6">
            <p>我已经想好了一个1-100之间的数字</p>
            <p class="text-gray-600 text-sm mt-1">看看你能多少次猜对它</p>
        </div>
 
        <div class="mb-4">
            <input type="number" id="guessInput"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                   placeholder="输入你的猜测..." min="1" max="100">
        </div>
 
        <button id="guessBtn"
                class="w-full bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-colors mb-4">
            提交猜测 <i class="fa fa-paper-plane ml-1"></i>
        </button>
 
        <button id="restartBtn"
                class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg transition-colors mb-4 hidden">
            重新开始 <i class="fa fa-refresh ml-1"></i>
        </button>
 
        <div id="message" class="text-center py-2 rounded-lg mb-4 hidden"></div>
 
        <div class="text-center text-sm text-gray-500">
            <p>已猜次数: <span id="attempts" class="font-bold text-primary">0</span></p>
        </div>
 
        <div id="history" class="mt-4 max-h-32 overflow-y-auto text-sm"></div>
    </div>
 
    <script>
        // 游戏变量
        let targetNumber;
        let attempts = 0;
        let gameActive = false;
 
        // DOM 元素
        const guessInput = document.getElementById('guessInput');
        const guessBtn = document.getElementById('guessBtn');
        const restartBtn = document.getElementById('restartBtn');
        const message = document.getElementById('message');
        const attemptsDisplay = document.getElementById('attempts');
        const historyContainer = document.getElementById('history');
 
        // 初始化游戏
        function initGame() {
            targetNumber = Math.floor(Math.random() * 100) + 1;
            attempts = 0;
            gameActive = true;
 
            // 更新UI
            attemptsDisplay.textContent = '0';
            message.classList.add('hidden');
            guessInput.value = '';
            guessInput.disabled = false;
            guessBtn.classList.remove('hidden');
            restartBtn.classList.add('hidden');
            historyContainer.innerHTML = '';
 
            // 自动聚焦输入框
            guessInput.focus();
        }
 
        // 处理猜测
        function handleGuess() {
            const guess = parseInt(guessInput.value);
 
            // 验证输入
            if (isNaN(guess) || guess < 1 || guess > 100) {
                showMessage('请输入1-100之间的数字', 'warning');
                return;
            }
 
            // 增加尝试次数
            attempts++;
            attemptsDisplay.textContent = attempts;
 
            // 记录历史
            addToHistory(guess);
 
            // 检查猜测结果
            if (guess === targetNumber) {
                showMessage(`恭喜你猜对了！答案就是 ${targetNumber}，你用了 ${attempts} 次`, 'success');
                endGame();
            } else if (guess < targetNumber) {
                showMessage('猜小了，再试一次', 'info');
            } else {
                showMessage('猜大了，再试一次', 'info');
            }
 
            // 清空输入框并聚焦
            guessInput.value = '';
            guessInput.focus();
        }
 
        // 显示消息
        function showMessage(text, type) {
            message.textContent = text;
            message.classList.remove('hidden', 'bg-success', 'bg-warning', 'bg-info', 'text-white');
 
            switch(type) {
                case 'success':
                    message.classList.add('bg-success', 'text-white');
                    break;
                case 'warning':
                    message.classList.add('bg-warning', 'text-white');
                    break;
                case 'info':
                    message.classList.add('bg-info', 'text-white');
                    break;
            }
        }
 
        // 结束游戏
        function endGame() {
            gameActive = false;
            guessInput.disabled = true;
            guessBtn.classList.add('hidden');
            restartBtn.classList.remove('hidden');
        }
 
        // 添加到历史记录
        function addToHistory(guess) {
            const entry = document.createElement('div');
            entry.className = 'py-1 border-b border-gray-100';
 
            if (guess < targetNumber) {
                entry.innerHTML = `第 ${attempts} 次: 猜了 ${guess} <span class="text-info">→ 猜小了</span>`;
            } else if (guess > targetNumber) {
                entry.innerHTML = `第 ${attempts} 次: 猜了 ${guess} <span class="text-warning">→ 猜大了</span>`;
            } else {
                entry.innerHTML = `第 ${attempts} 次: 猜了 ${guess} <span class="text-success">→ 猜对了！</span>`;
            }
 
            historyContainer.prepend(entry);
        }
 
        // 事件监听
        guessBtn.addEventListener('click', handleGuess);
        restartBtn.addEventListener('click', initGame);
 
        // 按回车键提交
        guessInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && gameActive) {
                handleGuess();
            }
        });
 
        // 开始游戏
        initGame();
    </script>
</body>
</html>